<template>
  <div>
    <div :class="{red:isflage}">   {{ aaAdd }}  </div>
    <div>{{ obj.name }}</div>
    <div>{{ isflage }}</div>
    <div>{{name}}</div>
    <div>{{keyVal}}</div>
  </div>
</template>

<script setup>
import { defineProps,  reactive } from 'vue';
// 返回类似reactive 定义的变
// 数字number,string,boolean,symbol,object,array
let props = defineProps({
  // 限制2个 类型,任选其一
  aaAdd: [String, Number],
  obj: Object,
  // 写成对象,
  isflage:{
    // 指定类型
    type:Boolean,
    // 必填项
    required: true,
  },
  ["key-val"]:{
    type:String
  },
  name:{
    // 默认值
    default:"李四"
  }
})
console.log(props);
console.log(reactive({ name: 'zhang' }));

</script>

<style  scoped>
.red{
  color: red;
}
</style>